<template>
  <scroll-view scroll-y :class="pageClass" :style="pageStyle" v-if="pageReady" @scrolltolower="scrolltolower">
   <moxi-nav :set="navSet"></moxi-nav>
   
   		<view class="complaint-header" v-for="list in data" @click="openInfo(list)" style="background-color: #fff;padding: 20px;margin: 12px;border-radius: 6px;">
   		    <view class="time-status">
				
   		      <text class="time">投诉时间：{{$u.timeFormat(list.c_time, 'yyyy年mm月dd日')}}</text>
   		      <view class="status">
					<text class="status-text"  v-if="list.status==1" >待处理</text>
					<text class="status-text" style="color: #00aa00;"  v-else-if="list.status==2">已处理</text>
					<u-icon name="arrow-right" size="14"></u-icon>
   		      </view>
   		    </view>
   		    <text class="store">{{list.shopName}}</text>
   		  </view>
		  
			<view>
				<u-popup :show="show" @close="close" @open="open" round="8" mode="bottom" height="100%">
				    <view class="popup-content">
				      <view class="popup-header">
				        <text class="popup-title">投诉详情</text>
				        <u-icon name="close" @click="close" size="24"></u-icon>
				      </view>
				      <scroll-view scroll-y class="popup-body">
				        <!-- 基本信息 -->
				        <view class="info-item">
				          <text class="info-label">姓名：</text>
				          <text class="info-value">{{content.name || '未提供'}}</text>
				        </view>
				        
				        <view class="info-item">
				          <text class="info-label">电话：</text>
				          <text class="info-value">{{content.tel || '未提供'}}</text>
				        </view>
				        
				        <view class="info-item">
				          <text class="info-label">投诉内容：</text>
				          <text class="info-value">{{content.con || '未提供'}}</text>
				        </view>
				        
				        <!-- 图片展示 -->
				        <view class="info-item" v-if="content.img && content.img.length > 0">
				          <text class="info-label">图片证据：</text>
				          <view class="image-list">
				            <u-image 
				              v-for="(img, index) in content.img" 
				              :key="index"
				              :src="img" 
				              width="150rpx" 
				              height="150rpx"
				              mode="aspectFill"
				              @click="previewImage(index)"
				            ></u-image>
				          </view>
				        </view>
				        
				        <!-- 视频展示 -->
				        <view class="info-item" v-if="content.video">
				          <text class="info-label">视频证据：</text>
				          <video 
				            :src="content.video" 
				            controls 
				            style="height: 300rpx;"
				          ></video>
				        </view>
				        
				        <!-- 处理反馈 -->
				        <view class="info-item" >
				          <text class="info-label">处理反馈：</text>
				         	<view style="width: calc(100% - 20px);">
								<u--textarea v-model="content.msg" placeholder="请输入回复内容"  ></u--textarea>
							</view>
				        </view>
				      </scroll-view>
			
						
				      <!-- 底部操作按钮 -->
				      <view class="popup-footer" v-if="content.status == 1">
				        <u-button type="primary" @click="handleProcess">提交处理</u-button>
				      </view>
				    </view>
				  </u-popup>
			</view>
					
  </scroll-view>
</template>

<script>
export default {
	data() {
	  return {
		  show:false,
		  value1: '',
		  info:{
			  shop_id:"",
			  	status:-1,
				page:1,
				page_num:20
		  },
		  data:[],
		  shopList:{},
		  content:{
			  name:"张三",
			  tel:"13545457878",
			  con:"投诉内容测试投诉内容测试投诉内容测试投诉内容测试投诉内容测试..sds",
			  img:["https://rehash.oss-cn-shenzhen.aliyuncs.com/site/240/250516/6826db3e145eb.jpg",
			  "https://rehash.oss-cn-shenzhen.aliyuncs.com/site/240/250516/6826db3e145eb.jpg"],
			  video:"https://rehash.oss-cn-shenzhen.aliyuncs.com/site/240/250516/6826db326ecf4.mp4",
			  msg:"",
		  },
		  hasMore:false
	  }
  },
  onLoad() {

	this.get()
  },
  methods:{
	  scrolltolower(e){
		if(this.hasMore){
			this.get(this.info.page+1)
		}
	  },
	  open(){
		  this.show =true
	  },
	  close(){
		  this.show = false
	  },
	  openInfo(list){
		  this.$set(this,'content',list)
		  this.show = true
	  },
	  get(page){
		  if(page){
			  this.info.page = page;
		  }
		  this.moxiPost("/plugin/tousu/user/info/manager_get",this.info,(res)=>{
			  console.log(res);
			  if(res.data.allpage > res.data.page){
				  this.hasMore = true;
			  }else{
				  this.hasMore = false;
			  }
			  if(res.shopList){
				  this.shopList = res.shopList;
			  }else{
				  res.shopList = this.shopList;
			  }

			  for(let k in res.data.data){
				  res.data.data[k].shopName = this.getShopName(res.data.data[k].shop_id,res.shopList)
				  this.data.push(res.data.data[k])
			  }
		  })
	  },
	  getShopName(shopId,shopList){
		  for(let k in shopList){
			  if(shopList[k] == shopId){
				  return k;
			  }
		  }
		  return '未知门店'
	  },
	      // 新增方法
	      previewImage(index) {
	        uni.previewImage({
	          current: index,
	          urls: this.content.img
	        });
	      },
	      
	      handleProcess() {
	        // 处理投诉逻辑
			this.moxiPost("/plugin/tousu/user/info/msg",this.content,(res)=>{
				this.msg(res.hint)
				for(let k in this.data){
					if(this.data[k].id == this.content.id){
						this.data[k].status = 2;
						break;
					}
				}
				 this.close();
			})
	      }
  }
  
}
</script>

<style scoped>
.complaint-header {
  padding: 15rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.time-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.time {
  font-size: 26rpx;
  color: #666;
}

.status {
  display: flex;
  align-items: center;
}

.status-text {
  font-size: 26rpx;
  color: #ff9900;
  margin-right: 5rpx;
}

.store {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

/* 新增弹窗样式 */
.popup-content {
  padding: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.popup-body {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.info-item {
  margin-bottom: 30rpx;
}

.info-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.info-value {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 15rpx;
}

.popup-footer {
  padding: 20rpx;
  border-top: 1rpx solid #f5f5f5;
}

/* 保持原有样式不变 */
.complaint-header {
  padding: 15rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.time-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.time {
  font-size: 26rpx;
  color: #666;
}

.status {
  display: flex;
  align-items: center;
}

.status-text {
  font-size: 26rpx;
  color: #ff9900;
  margin-right: 5rpx;
}

.store {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
</style>
